<template>
  <div>
    <headTop></headTop>
    <div class="main-wrap d-flex justify-content-between">
      <div class="left-admin-nav pull-left">
        <Nav></Nav>
        <div class="top-line" v-if="false"></div>
        <div class="current-areas d-flex" v-if="false">
          <div>
            <i class="icon-icon_loacl"></i>
          </div>
          <div class="cuur-text over-text">
            <span>
              当前执行地区“
              <span id="areaName">{{ executionArea }}</span>”
            </span>
          </div>
          <button
            type="button"
            class="btn btn-with-ico btn-rounded console-btn"
            @click="stopExecutionPlan"
          >
            <i class="icon-icon_stop"></i>
            <span>停止</span>
          </button>
        </div>
        <div class="bottom-line" v-if="false"></div>
        <div class="driver-search-list item-container scroll-bar drivers-list" id="planList">
          <table class="table table-striped boxed">
            <thead>
              <tr class="head-tile">
                <th scope="col" style="width:50px">序号</th>
                <th scope="col">
                  方案名称
                  <span id="createdNewPlan" @click="createRand()">+ 新建</span>
                </th>
                <th scope="col" style="width:70px">操作</th>
              </tr>
            </thead>
            <tbody id="planLists">
              <tr class="tb-cont" v-for="(paln,index) in palnList" :key="index">
                <th scope="row" title="1.SKN123">
                  <span>{{ index+1 }}</span>
                </th>
                <td>{{ paln.fenceName }}</td>
                <td class="tb-operation">
                  <a
                    href="#"
                    class="icon-icon_continue"
                    title="开启围栏"
                    @click="executionPlan(paln.fenceName)"
                  v-if="paln.isShow"></a>

                      <a
                    href="#"
                    class="icon-icon_stop"
                    title="关闭围栏"
                    @click="stopExecutionPlan(paln.fenceName)"
                  v-if="!paln.isShow" ></a>
                  <a href="#" class="icon-bin" title="删除围栏" @click="deleteRange(paln.fenceName)"></a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <v-pagination :total="total" :current-page="current" @pagechange="pagechange"></v-pagination>

        <ul class="v-pagination item-container" id="dariverListPage" hidden>
          <li class="disabled">
            <a href="javascript:;">«</a>
          </li>
          <li class="disabled">
            <a href="javascript:;">首页</a>
          </li>

          <li class="active">
            <a href="javascript:;">1</a>
          </li>

          <li class="disabled">
            <a href="javascript:;">尾页</a>
          </li>
          <li class="disabled">
            <a href="javascript:;">»</a>
          </li>
          <div class="d-flex subPage">
            <span>第</span>
            <input type="number" maxlength="5" class="inputNmber" placeholder="1">
            <span>页</span>
            <span class="page-total">共50页</span>
          </div>
        </ul>

        <div class="driver-search-list item-container scroll-bar drivers-list" id="currentPlants">
          <table class="table table-striped boxed">
            <thead>
              <tr class="head-tile">
                <th scope="col" style="width:50px">序号</th>
                <th scope="col">方案名称</th>
                <th scope="col" style="width:50px">操作</th>
              </tr>
            </thead>
            <tbody id="currentPlants">
              <tr class="tb-cont" v-for="(currentPlant,index) in currentPlants" :key="index" >
                <th scope="row" title="1.SKN123">
                  <span>{{ index+1 }}</span>
                </th>
                <td>{{ currentPlant.fenceName }}</td>
                <td class="tb-operation">
                  <a
                    href="#"
                    class="icon-view-password"
                    title="执行该方案"
                    @click="startInterval(currentPlant)"
                 v-if="currentPlant.isShow" ></a>
                  <a
                    href="#"
                    class="icon-chakanmima"
                    title="停止该方案"
                    @click="closeSaftFence(currentPlant)"
                v-if="!currentPlant.isShow"  ></a>

                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="center-scroll-sys-msg">
        <div class="msg-black">{{ this.global.copyrightText }}</div>
      </div>

      <div class="right-driver-info pull-right">
        <div class="item-container">
          <div class="current-areas wg-driver d-flex" id="currdTt">
            <div>
              <i class="icon-icon_loacl"></i>
            </div>
            <div class="cuur-text">
              <span>信阳市东站</span>
            </div>
            <div class="wg-driver-txt">
              违规设备
              <span class="led-number">{{getOutOfLineNum.length}}</span> 台
            </div>
          </div>
          <div class="driver-list-b scroll-bar" id="driverListB">
            <div
              class="fault-class-statistics"
              v-for="(test,index) in getOutOfLineNum"
              :key="index"
            >
              <div class="top-line"></div>
              <div class="d-flex row">
                <a class="col-4 statistics-item" href="#">
                  <div class="fault-icon">
                    <img src="static/img/driver_icon.png" class="inner-icon">

                    <img src="static/img/icon_ld_bg.png" class="radar-icon radar-animate-e">
                  </div>
                  <p class="name">围栏报警</p>
  
                </a>
                <a class="col-8 driver-status-txt" href="#">
                  <p>
                    设备
                   <span class="driver-color-green">{{test.deviceId}}</span>  <!-- @click="getAddress(test.nowPoint.lng,test.nowPoint.lat,$event) " -->
                    于{{test.inFenceTime}}在<a >{{test.nowPoint.lng.toFixed(4)}},{{test.nowPoint.lat.toFixed(4)}}</a>
                    <span>处进入安全围栏</span>
                  </p>
                </a>
              </div>
              <div class="bottom-line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <baiduMapSafetyWarning
      @getPalnList="getPalnList"
      @getDeviceMarker="getDeviceMarker"
      @getDrawedOverlays="getDrawedOverlays"
    ></baiduMapSafetyWarning>

    <!-- 创建方案弹出窗口 -->
    <div class="fixed-wrap" v-if="isShowCreatedPlan">
      <div class="created-plan">
        <div class="c-tip">
          保存方案
          <a class="icon-times" @click="closeCreatedPlan"></a>
        </div>
        <div class="input-p-name d-flex">
          <label>方案名称：</label>
          <input type="text" maxlength="12" class="form-control" placeholder v-model="planName">
        </div>
        <div>
          <button class="save-btn" @click="saveSecurityFence">保存</button>
        </div>
      </div>
    </div>
    <!-- 装饰条 -->
    <div class="top-border-decorate">
      <img src="static/img/border-row.png" class="inner-icon" height="100%" width="100%">
    </div>
    <div class="bottom-border-decorate">
      <img src="static/img/border-row.png" class="inner-icon" height="100%" width="100%">
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav.vue";
import headTop from "../../components/headerTop.vue";
import baiduMapSafetyWarning from "../../components/baiduMapSafetyWarning.vue";
import ScrollSysMsg from "../../components/ScrollSysMsg.vue";
import pagination from "../../components/pagination.vue";

export default {
  name: "SafetyWarming",
  components: {
    Nav,
    headTop,
    baiduMapSafetyWarning,
    ScrollSysMsg,
    "v-pagination": pagination
  },
  data() {
    return {
      screenHeight: document.body.clientHeight,
      isStart: false,
      executionArea: "未选定任何方案",
      isShowCreatedPlan: false,
      total: 150, // 记录总条数
      display: 20, // 每页显示条数
      //pageSize:2,//默认每页显示条数
      current: 1, // 当前的页数
      styleOptions: {
        //绘图工具选项
        strokeColor: "#e60012", //边线颜色。
        fillColor: "#e60012", //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3, //边线的宽度，以像素为单位。
        strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
        fillOpacity: 0.2, //填充的透明度，取值范围0 - 1。
        strokeStyle: "dashed" //边线的样式，solid或dashed。
      },
      curPolygon: [], //当前执行的方案
      deviceMarker: [],
      firstDeviceMarker: [], //第一次进入围栏的点
      overlays: [], //用来判断是否进入安全围栏的集合
      deviceIntoSaftRange: [], //更新前进入安全围栏的集合
      drawedOverlays: [], //刚画的安全围栏
      taskOfIsLimits: "", //判断任务
      planName: "", //安全围栏的名字
      //违规设备数量
      getOutOfLineNum: [],
      appKey: "",
      userName: "",
      palnList: [],
      isActive: false,
      isShowCreatedPlan: false, //是否显示保存方案栏
      maskOfGetIllegalDevices: "", //违规设备定时任务
      currentPlants: [], //当前正在执行的方案集合
      currentShowPolygon: [], //当前已经显示的安全围栏
      addressInfo: "" //地理信息
    };
  },
  created: function() {},
  watch: {
    screenHeight(winHeight) {
      setTimeout(() => {
        this.setDriversListHeightB();
      }, 500);
    }
  },
  methods: {
    setDriversListHeightB() {
      var winHeight = $(window).innerHeight();
      this.screenHeight = winHeight;
      var currdTtheight = $("#currdTt").innerHeight();
      $("#driverListB").height(winHeight - currdTtheight - 120);
      var driverNavHeight = $("#driverNav").innerHeight();
      var currentAreasHeight = $(".current-areas").innerHeight();
      var dariverListPageHeight = $("#dariverListPage").innerHeight();
      $(".right-driver-info").height(winHeight - 95);
      $(".left-admin-nav").height(winHeight - 95);
      var leftWidth = $(".left-admin-nav").width();
      var rightWidth = $(".right-driver-info").width();
      $(".center-scroll-sys-msg").css({
        paddingLeft: leftWidth + 20,
        paddingRight: rightWidth + 20
      });
      $("#planList").height(
        winHeight -
          driverNavHeight -
          currentAreasHeight -
          dariverListPageHeight -
          305
      );
      $("#currentPlants").height(215);
    },

    //选择执行方案
    executionPlan(name) {
      var _this = this;
      if (_this.currentPlants.length > 4) {
        _this.$showToast("最多只能启动五个方案");
        return;
      }
      for (var x = 0; x < _this.currentPlants.length; x++) {
        var currentFenceName = _this.currentPlants[x].fenceName;
        if (currentFenceName == name) {
          _this.$showToast("该方案已经在启动了");
          return;
        }
      }

      $.ajax({
        url: _this.global.onFence, //请求的url地址
        contentType: "application/json",
        dataType: "text", //返回格式为json
        data: JSON.stringify({
          fenceName: name,
          appKey: _this.appKey,
          userName: _this.userName
        }), //参数值
        type: "POST", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {},
        complete: function() {
          _this.getAllPlants();
        },
        error: function() {
          //请求出错处理
        }
      });
    },
    //停止执行该方案
    stopExecutionPlan(fenceName) {
      var _this = this;
      $.ajax({
        url: _this.global.offFence, //请求的url地址
        contentType: "application/json",
        dataType: "text", //返回格式为json
        data: JSON.stringify({
          fenceName: fenceName,
          appKey: _this.appKey,
          userName: _this.userName
        }), //参数值
        type: "POST", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          var points = [];
          if (JSON.parse(req).code == "200") {
            _this.$showToast("该方案停止");
          }
        },
        complete: function() {
          _this.getAllPlants();
          if (_this.isEmptyObject(_this.currentPlants)) {
            clearInterval(_this.maskOfGetIllegalDevices);
            _this.maskOfGetIllegalDevices = "";
          }
        },
        error: function() {
          //请求出错处理
        }
      });
    },
    //分页工具
    pagechange(currentPage) {
      this.current = currentPage;
      this.getPlants();
      // ajax请求, 向后台发送 currentPage, 来获取对应的数据
    },

    deleteRange: function(planName) {
      for (var i = 0; i < this.drawedOverlays.length; i++) {
        //清除已经画好的安全围栏
        window.SafetyWariningMap.removeOverlay(this.drawedOverlays[i]);
      }

      var _this = this;
      $.ajax({
        url: _this.global.deleteFence, //请求的url地址
        contentType: "application/json",
        dataType: "text", //返回格式为json
        data: JSON.stringify({
          fenceName: planName,
          appKey: _this.appKey,
          userName: _this.userName
        }), //参数值
        type: "POST", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          var response = JSON.parse(req);
          if (response.code == "200") {
            _this.palnList = JSON.parse(req).data.fenceInfos;
          } else if (response.code == "819232") {
            _this.$showToast(response.msg);
          }
        },
        complete: function() {},
        error: function() {
          //请求出错处理
        }
      });
    },

    /* ***************创建百度地图点的坐标加信息框begin**************   */
    createMarket: function(node, info_html) {
      var myIcon = new BMap.Icon(
        "static/img/icon_drivce_small.png",
        new BMap.Size(37, 45)
      );
      var marker = new BMap.Marker(new BMap.Point(node.lng, node.lat), {
        icon: myIcon
      });
      var opts = {
        width: 200, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "<div>设备信息</div>", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
        message: "设备信息message"
      };

      marker.addEventListener("mouseover", function(e) {
        var myIcon = new BMap.Icon(
          "static/img/icon_drivce_big.png",
          new BMap.Size(54, 67)
        );
        marker.setIcon(myIcon);
        //  this.openInfoWindow(new BMap.InfoWindow(info_html, opts));
      });
      marker.addEventListener("mouseout", function(e) {
        var myIcon = new BMap.Icon(
          "static/img/icon_drivce_small.png",
          new BMap.Size(37, 45)
        );
        marker.setIcon(myIcon);
        // this.closeInfoWindow();
      });

      marker.addEventListener("click", function(e) {
        this.openInfoWindow(new BMap.InfoWindow(info_html, opts));
      });
      return marker;
    },

    createMarket2: function(node, info_html) {
      var myIcon = new BMap.Icon(
        "static/img/slintgt.svg",
        new BMap.Size(18, 18)
      );

      var marker = new BMap.Marker(new BMap.Point(node.lng, node.lat), {
        icon: myIcon
      });
      var opts = {
        width: 200, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "<div>设备信息</div>", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
        message: "设备信息message"
      };

      marker.addEventListener("mouseover", function(e) {
        var myIcon = new BMap.Icon(
          "static/img/icon_drivce_big.png",
          new BMap.Size(54, 67)
        );
        // marker.setIcon(myIcon);
        //  this.openInfoWindow(new BMap.InfoWindow(info_html, opts));
      });
      marker.addEventListener("mouseout", function(e) {
        var myIcon = new BMap.Icon(
          "static/img/icon_drivce_small.png",
          new BMap.Size(37, 45)
        );
        //   marker.setIcon(myIcon);
        // this.closeInfoWindow();
      });

      marker.addEventListener("click", function(e) {
        this.openInfoWindow(new BMap.InfoWindow(info_html, opts));
      });
      return marker;
    },

    //获取违规设备信息
    getIllegalDeviceInfo: function(name) {
      var _this = this;
      var myGeo = new BMap.Geocoder();
      $.ajax({
        url: _this.global.innerFence, //请求的url地址
        dataType: "json", //返回格式为json
        data: { appKey: _this.appKey, fenceName: name }, //参数值
        type: "GET", //请求方式
        async: false,
        beforeSend: function() {
          for (var a = 0; a < _this.deviceMarker.length; a++) {
            window.SafetyWariningMap.removeOverlay(_this.deviceMarker[a]);
          }
          _this.deviceMarker = [];
        },
        success: function(req) {
          if (req.code == "200") {
            if (req.data.totalCount != 0) {
              //清除旧的点的坐标
              for (var i = 0; i < _this.deviceMarker.length; i++) {
                window.SafetyWariningMap.removeOverlay(_this.deviceMarker[i]);
              }
              _this.deviceMarker = [];
              var illegalDeviceInfos = req.data.illegalDeviceInfos;

              for (var j = 0; j < req.data.illegalDeviceInfos.length; j++) {
                var point = new BMap.Point(
                  illegalDeviceInfos[j].nowPoint.lng,
                  illegalDeviceInfos[j].nowPoint.lat
                );

                var marker = _this.createMarket2(
                  point,
                  "<div>设备号:" +
                    illegalDeviceInfos[j].deviceId +
                    "于" +
                    new Date(illegalDeviceInfos[j].inFenceTime).format(
                      "yyyy-MM-dd hh:mm:ss"
                    ) +
                    "位于" +
                    illegalDeviceInfos[j].nowPoint.lng.toFixed(6) +
                    "," +
                    illegalDeviceInfos[j].nowPoint.lat.toFixed(6) +
                    "</div>"
                );
                if (_this.isEmptyObject(_this.firstDeviceMarker)) {
                  window.SafetyWariningMap.addOverlay(marker);
                  _this.deviceMarker.push(marker); //把market放入集合
                } else {
                  for (var x = 0; x < _this.firstDeviceMarker.length; x++) {
                    if (
                      (marker.getPosition().lng ==
                        _this.firstDeviceMarker[x].getPosition().lng &&
                        marker.getPosition().lat ==
                          _this.firstDeviceMarker[x].getPosition().lat) == false
                    ) {
                      window.SafetyWariningMap.addOverlay(marker);
                      _this.deviceMarker.push(marker); //把market放入集合
                    }
                  }
                }
              }

              _this.getOutOfLineNum = _this.uniqueArr(
                _this.getOutOfLineNum,
                illegalDeviceInfos
              );
            }
          }
        },
        complete: function() {},
        error: function() {}
      });
    },

    //获取第一进入违规设备信息
    getFirstIllegalDeviceInfo: function(name) {
      var _this = this;
      $.ajax({
        url: _this.global.firstInnerFence, //请求的url地址
        dataType: "json", //返回格式为json
        data: { appKey: _this.appKey, fenceName: name }, //参数值
        type: "GET", //请求方式
        async: false,
        beforeSend: function() {
          //请求前的处理
          var allOverlay = window.SafetyWariningMap.getOverlays();
          for (var x = 0; x < allOverlay.length; x++) {
            //删除指定经度的点
            if (allOverlay[x].toString() == "[object Marker]") {
              window.SafetyWariningMap.removeOverlay(allOverlay[x]);
            }
          }
        },
        success: function(req) {
          if (req.code == "200") {
            var illegalDeviceInfos = req.data.illegalDeviceInfos;

            if ((typeof illegalDeviceInfos != "undefined") == true) {
              //清除旧的点的坐标

              for (var i = 0; i < _this.firstDeviceMarker.length; i++) {
                window.SafetyWariningMap.removeOverlay(
                  _this.firstDeviceMarker[i]
                );
              }

              _this.firstDeviceMarker = [];
              if (req.data.totalCount != 0) {
                for (var j = 0; j < illegalDeviceInfos.length; j++) {
                  var point = new BMap.Point(
                    illegalDeviceInfos[j].nowPoint.lng,
                    illegalDeviceInfos[j].nowPoint.lat
                  );

                  var marker = _this.createMarket(
                    point,
                    "<div>设备号:" +
                      illegalDeviceInfos[j].deviceId +
                      "于" +
                      new Date(illegalDeviceInfos[j].inFenceTime).format(
                        "yyyy-MM-dd hh:mm:ss"
                      ) +
                      "位于" +
                      illegalDeviceInfos[j].nowPoint.lng.toFixed(6) +
                      "," +
                      illegalDeviceInfos[j].nowPoint.lat.toFixed(6) +
                      "</div>"
                  );
                  window.SafetyWariningMap.addOverlay(marker);
                  _this.firstDeviceMarker.push(marker); //把market放入集合
                }
              }

              _this.getOutOfLineNum = illegalDeviceInfos;
            }
          }
        },
        complete: function() {},
        error: function() {
          //请求出错处理
        }
      });
    },

    //关闭closeCreatedPlan窗口
    closeCreatedPlan() {
      this.isShowCreatedPlan = false;
    },
    getPalnList(vals) {
      //msg就是传过来的数据了  这只是个形参  名字可以随意
      this.palnList = vals; //然后将数据赋值给chindVal
    },
    getDeviceMarker(vals) {
      //msg就是传过来的数据了  这只是个形参  名字可以随意
      this.deviceMarker = vals; //然后将数据赋值给chindVal
    },
    getDrawedOverlays(vals) {
      //msg就是传过来的数据了  这只是个形参  名字可以随意
      this.drawedOverlays = vals; //然后将数据赋值给chindVal
    },

    overlaycomplete: function(e) {
      this.securityFence = []; //初始化集合
      this.isShowCreatedPlan = true; //弹出保存安全围栏的名字的框
      this.overlays.push(e.overlay);
      var path = e.overlay.getPath(); //Array<Point> 返回多边型的点数组
      for (var i = 0; i < path.length; i++) {
        var point = new BMap.Point(path[i].lng, path[i].lat);
        this.securityFence.push(point);
      }
      // this.$emit('getDrawedOverlays',this.overlays);
      this.drawedOverlays = this.overlays;
    },
    createRand: function() {
      // if (this.isStart == true) {
      //   this.$showToast("先停止执行方案，再进行创建操作");
      //   return;
      // } else {
      this.$showToast("请在地图上单击左键开始绘制，双击完成");
      for (var i = 0; i < this.drawedOverlays.length; i++) {
        //清除已经画好的安全围栏
        window.SafetyWariningMap.removeOverlay(this.drawedOverlays[i]);
      }
      //实例化鼠标绘制工具
      var drawingManager = new BMapLib.DrawingManager(
        window.SafetyWariningMap,
        {
          isOpen: false, //是否开启绘制模式
          enableDrawingTool: this.isOpenDrawManager, //是否显示工具栏
          drawingMode: BMAP_DRAWING_POLYGON,
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(390, 105), //偏离值
            drawingModes: [
            //  BMAP_DRAWING_POLYGON,
              BMAP_DRAWING_POLYLINE
            ]
          },
          circleOptions: this.styleOptions, //圆的样式
          polylineOptions: this.styleOptions, //线的样式
          polygonOptions: this.styleOptions, //多边形的样式
          rectangleOptions: this.styleOptions //矩形的样式
        }
      );
      drawingManager.open();
      drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
      //添加鼠标绘制工具监听事件，用于获取绘制结果
      drawingManager.addEventListener("overlaycomplete", this.overlaycomplete);
      // $('.BMapLib_Drawing_panel').show();
    },

    //关闭closeCreatedPlan窗口
    closeCreatedPlan() {
      this.isShowCreatedPlan = false;
    },
    //保存安全围栏
    saveSecurityFence: function() {
      var _this = this;
      var securityFence = JSON.stringify(_this.securityFence);
      var planName = this.planName;
      $.ajax({
        url: _this.global.createFence, //请求的url地址
        contentType: "application/json",
        dataType: "text",
        data: JSON.stringify({
          points: _this.securityFence,
          fenceName: planName,
          appKey: _this.appKey,
          userName: _this.userName
        }), //参数值
        type: "POST", //请求方式
        beforeSend: function() {
          //请求前的处理
        },
        success: function(req) {
          _this.palnList = JSON.parse(req).data.fenceInfos;
          //code":"200","data":true,"success":true}
          //    _this.palnList=req;
          //  _this.setPalnList();
        },
        complete: function() {
          //请求完成的处理
          _this.isShowCreatedPlan = false; //关闭保存安全围栏的名字的框
          // $('.BMapLib_Drawing_panel').hide();//隐藏工具栏
          _this.planName = "";
        },
        error: function() {
          //请求出错处理
        }
      });
    },

    getPlants: function() {
      var _this = this;
      $.ajax({
        url: _this.global.queryFence, //请求的url地址
        dataType: "json", //返回格式为json
        data: {
          appKey: _this.appKey,
          fenceName: "",
          pageSize: _this.display,
          pageNo: _this.current - 1
        }, //参数值
        type: "GET", //请求方式
        beforeSend: function() {
          for (var i = 0; i < _this.drawedOverlays.length; i++) {
            //清除已经画好的安全围栏
            window.SafetyWariningMap.removeOverlay(_this.drawedOverlays[i]);
          }
        },
        success: function(req) {
          if (req.code == "200") {
            _this.palnList = req.data.fenceInfos;
            if (_this.isEmptyObject(_this.palnList)) {
              console.log("为空");
            } else {
              for (var sb = 0; sb < _this.palnList.length; sb++) {
                if (_this.palnList[sb].isOn == "ON") {
                  _this.palnList[sb].isShow = false;
                } else {
                  _this.palnList[sb].isShow = true;
                }
              }
            }
            _this.total = req.data.totalCount;
            var pageListLenth = Math.ceil(req.data.totalCount / _this.display);
            _this.pagegroup = pageListLenth;
          }

          // _this.setPalnList();
        },
        complete: function() {
          //请求完成的处理
          _this.isShowCreatedPlan = false; //关闭保存安全围栏的名字的框
          //  $('.BMapLib_Drawing_panel').hide();//隐藏工具栏
          _this.planName = "";
        },
        error: function() {
          //请求出错处理
        }
      });
    },
    getAllPlants: function() {
      var _this = this;
      $.ajax({
        url: _this.global.queryFence, //请求的url地址
        dataType: "json", //返回格式为json
        data: { appKey: _this.appKey }, //参数值
        async: false,
        type: "GET", //请求方式
        beforeSend: function() {
          for (var i = 0; i < _this.drawedOverlays.length; i++) {
            //清除已经画好的安全围栏
            window.SafetyWariningMap.removeOverlay(_this.drawedOverlays[i]);
          }
        },
        success: function(req) {
          if (req.code == "200") {
            _this.palnList = req.data.fenceInfos;
            if (_this.isEmptyObject(_this.palnList)) {
              console.log("为空");
            } else {
              for (var sb = 0; sb < _this.palnList.length; sb++) {
                if (_this.palnList[sb].isOn == "ON") {
                  _this.palnList[sb].isShow = false;
                } else {
                  _this.palnList[sb].isShow = true;
                }
              }
            }

            if (_this.isEmptyObject(_this.currentPlants)) {
              console.log("为空");
            } else {
              for (var s = 0; s < _this.currentPlants.length; s++) {
                window.SafetyWariningMap.removeOverlay(
                  _this.currentPlants[s].polygon
                );
              }
            }
            _this.currentPlants = [];
            var areaName = "";
            _this.total = req.data.totalCount;
            var pageListLenth = Math.ceil(req.data.totalCount / _this.display);
            _this.pagegroup = pageListLenth;

            for (var i = 0; i < req.data.fenceInfos.length; i++) {
              var isOn = req.data.fenceInfos[i].isOn;
              if (isOn == "ON") {
                _this.isStart = true;
                _this.executionArea = req.data.fenceInfos[i].fenceName;
                var points = req.data.fenceInfos[i].points;

                areaName = areaName + _this.executionArea + ",";
                var pointList = [];
                for (var j = 0; j < points.length; j++) {
                  var point = new BMap.Point(points[j].lng, points[j].lat);
                  pointList.push(point);
                }

                // _this.$showToast("执行该方案");
                var polygon = new BMap.Polygon(pointList, _this.styleOptions);
                _this.overlays.push(polygon);
                //   window.SafetyWariningMap.addOverlay(polygon);
                _this.curPolygon.push(polygon);

                _this.currentPlants.push({
                  polygon: polygon,
                  fenceName: req.data.fenceInfos[i].fenceName,
                  isShow: true
                });
              }
            }
            $("#areaName").text(areaName);
          }
          _this.startInterval("");
        },
        complete: function() {
          //请求完成的处理
          _this.isShowCreatedPlan = false; //关闭保存安全围栏的名字的框
          //  $('.BMapLib_Drawing_panel').hide();//隐藏工具栏
          _this.planName = "";
        },
        error: function() {
          //请求出错处理
        }
      });
    },
    //根据设备显示安全围栏
    showSaftFence: function(fenceName) {
      var name = fenceName;
      for (var x = 0; x < this.currentPlants.length; x++) {
        var currentFenceName = this.currentPlants[x].fenceName;
        if (currentFenceName == name) {
          window.SafetyWariningMap.addOverlay(this.currentPlants[x].polygon);
          this.currentShowPolygon.push(currentFenceName);
        }
      }
    },
    //根据设备关闭安全围栏
    closeSaftFence: function(currentPlant) {
      var name = currentPlant.fenceName;
      for (var x = 0; x < this.currentPlants.length; x++) {
        var currentFenceName = this.currentPlants[x].fenceName;
        if (currentFenceName == name) {
          window.SafetyWariningMap.removeOverlay(this.currentPlants[x].polygon);
          for (var i = 0; i < this.currentShowPolygon.length; i++) {
            if (this.currentShowPolygon[i] == name) {
              this.currentShowPolygon.splice(i, 1);
            }
          }
        }
      }
      var allOverlay = window.SafetyWariningMap.getOverlays();
      for (var x = 0; x < allOverlay.length; x++) {
        //删除指定经度的点
        if (allOverlay[x].toString() == "[object Marker]") {
          window.SafetyWariningMap.removeOverlay(allOverlay[x]);
        }
      }
      this.getOutOfLineNum = [];
      currentPlant.isShow = true;
      clearInterval(this.maskOfGetIllegalDevices);
      this.maskOfGetIllegalDevices = "";
    },

    isEmptyObject: function(e) {
      var t;
      for (t in e) return !1;
      return !0;
    },
    uniqueArr: function(arr1, arr2) {
      var c = arr2.concat(arr1), //合并成一个数组
        temp = {}, //用于fenceName判断重复
        result = []; //最后的新数组
      //遍历c数组，将每个item.id在temp中是否存在值做判断，
      c.map((item, index) => {
        if (!temp[item.deviceId]) {
          result.push(item);
          temp[item.deviceId] = true;
        }
      });
      return result;
    },
    //启动定时器
    startInterval: function(currentPlant) {
      for (var n = 0; n < this.drawedOverlays.length; n++) {
        //清除已经画好的安全围栏
        window.SafetyWariningMap.removeOverlay(this.drawedOverlays[n]);
      }
      this.getOutOfLineNum = [];
      var allOverlay = window.SafetyWariningMap.getOverlays();
      for (var m = 0; m < allOverlay.length; m++) {
        //删除指定经度的点
        if (allOverlay[m].toString() == "[object Marker]") {
          window.SafetyWariningMap.removeOverlay(allOverlay[m]);
        }
      }

      var fenceName = currentPlant.fenceName;
      for (var x = 0; x < this.currentPlants.length; x++) {
        var currentFenceName = this.currentPlants[x].fenceName;
        window.SafetyWariningMap.removeOverlay(this.currentPlants[x].polygon);
        for (var i = 0; i < this.currentShowPolygon.length; i++) {
          if (this.currentShowPolygon[i] == name) {
            this.currentShowPolygon.splice(i, 1);
          }
        }
      }

      if (this.isEmptyObject(this.currentPlants)) {
        console.log("为空");
      } else {
        for (var sb = 0; sb < this.currentPlants.length; sb++) {
          this.currentPlants[sb].isShow = true;
        }
        clearInterval(this.maskOfGetIllegalDevices);
        for (var n = 0; n < this.drawedOverlays.length; n++) {
          //清除已经画好的安全围栏
          window.SafetyWariningMap.removeOverlay(this.drawedOverlays[n]);
        }
        this.maskOfGetIllegalDevices = "";
        var currentPlantsLength = this.currentPlants.length - 1;
        if (fenceName == "" || fenceName == null) {
          this.currentPlants[0].isShow = false;
          this.maskOfGetIllegalDevices = setInterval(() => {
            setTimeout(
              this.getFirstIllegalDeviceInfo(this.currentPlants[0].fenceName),
              0
            );

            setTimeout(
              this.getIllegalDeviceInfo(this.currentPlants[0].fenceName),
              0
            );
          }, 4000);
          this.$once("hook:beforeDestroy", () => {
            clearInterval(this.maskOfGetIllegalDevices);
            this.maskOfGetIllegalDevices = "";
          });

          this.showSaftFence(this.currentPlants[0].fenceName);
        } else {
          currentPlant.isShow = false;
          this.maskOfGetIllegalDevices = setInterval(() => {
            setTimeout(this.getFirstIllegalDeviceInfo(fenceName), 0);

            setTimeout(this.getIllegalDeviceInfo(fenceName), 0);
          }, 4000);
          this.$once("hook:beforeDestroy", () => {
            clearInterval(this.maskOfGetIllegalDevices);
            this.maskOfGetIllegalDevices = "";
          });
          this.showSaftFence(fenceName);
        }
      }
    },
    //百度地图地理逆解析

    getAddress: function(lng, lat, e) {
      var myGeo = new BMap.Geocoder();
      var pt = new BMap.Point(lng, lat);
      myGeo.getLocation(pt, function(rs) {
        var _this = this;
        var add = rs.address;
        e.target.innerText = add;
      });
    }
  },
  mounted: function() {
    this.appKey = JSON.parse(localStorage.getItem("userInfo")).appKey;
    this.userName = JSON.parse(localStorage.getItem("userInfo")).userName;
    //挂载页面
    document.title = "安全警告-北斗位置服务管理平台";
    const _this = this;
    this.setDriversListHeightB();
    // this.$overTextScroll();
    // this.getPlants();
    this.getAllPlants();
    document.getElementById("planLists").oncontextmenu = function(e) {
      return false;
    };
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        _this.screenHeight = window.screenHeight;
      })();
    };
  },
  destroyed: function() {
    var _this = this;
    //页面销毁

    clearInterval(this.maskOfGetIllegalDevices);
    this.maskOfGetIllegalDevices = "";
  }
};
</script>

<style scoped>
</style>


         